<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>修改资料</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="/css/personList.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
</head>


<body>
<!--信息页-->
<div class="page">
    <!--头部导航-->
    <header class="bar bar-nav">
        <a class="icon icon-left pull-left" href="/admin/personal"></a>
<!--        <a class="icon icon-refresh pull-right"></a>-->
        <h1 class="title">修改资料</h1>
    </header>
    <!--底部导航-->
    <%- include ("../common/publicnav.ejs")%>

    <!--主体部分-->
    <div class="content native-scroll">
        <div class="content">
            <div class="list-block">
                    <ul>

                        <!--头像-->
                        <li>
                            <div class="item-content personalPic">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">头像</div>
                                    <div class="item-input">
                                        <div class="addPic">
                                            <div class="addInput">
                                                <input type="file" id="file" class="headFile" onchange="headFile()">
                                            </div>
                                            <div class="addShow">
                                                <div class="addPhoto headPic">+</div>
                                                <img src="/images/pic.jpg" class="addImg"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!--昵称-->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">昵称</div>
                                    <div class="item-input">
                                        <input id="nickname" type="text" placeholder="昵称">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!--密码-->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-password"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">密码</div>
                                    <div class="item-input">
                                        <input id="password" type="password" placeholder="输入新密码" class="">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!--性别-->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">性别</div>
                                    <div class="item-input">
                                        <select id="sex">
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!--个人简介-->
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">个人简介</div>
                                    <div class="item-input">
                                        <textarea id="personInformation"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
                    <div class="col-50"><a onclick="submit()" class="button button-big button-fill button-success">提交</a></div>
                </div>
            </div>
        </div>
    </div>
    </div>

<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".addPhoto").click(function () {
            $('[type=file]').eq(0).click();
        });
    })

    // 修改头像
    function headFile(){
        var preview = document.getElementsByClassName("addImg")[0];
        var file = document.getElementsByClassName("headFile")[0].files[0];
        // alert(file);
        var reader = new FileReader();
        reader.addEventListener("load", function () {
            preview.src = reader.result;
        }, false);
        if (file) {
            reader.readAsDataURL(file);
        }
        var headFile = document.getElementsByClassName('headFile')[0].files[0];
        var formData = new FormData();
        formData.append("file", headFile);

    }


    function submit() {
        $.showPreloader('正在登录')
        setTimeout(function () {
            $.hidePreloader();
        }, 2000);
        const nickname = document.getElementById("nickname").value;
        const password = document.getElementById("password").value;
        const sex = document.getElementById("sex").value;
        const personInformation = document.getElementById("personInformation").value;
        const file = document.getElementById("file").value;
        $.ajax({
            type: 'POST',
            url: '/admin/personList/updata',
            // data to be added to query string:
            data: {
                password: password,
                sex:sex,
                nickname:nickname,
                personInformation:personInformation,
                file:file
            },
            // type of data we are expecting in return:
            dataType: 'json',
            success: function (data) {

            }
        })
    }
</script>
</body>
</html>
